<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">巡查模版配置</el-menu-item>
      <el-menu-item index="3">模板资源库</el-menu-item>
      <el-menu-item index="2">回收站</el-menu-item>
    </el-menu>
    <!--    巡查模版配置--><!--    巡查模版配置--><!--    巡查模版配置--><!--    巡查模版配置--><!--    巡查模版配置--><!--    巡查模版配置-->
    <div v-if="activeIndex==1" class="topSearch">
      <div>
        <el-button size="small" type="primary" @click="_add"><i class="el-icon-plus" style="margin-right: 5px"></i>添加
        </el-button>
        <el-button size="small" style="background-color:#fff;border: 1px solid #d9d9d9" :disabled="true"><i
            class="el-icon-upload2"
            style="margin-right: 5px"></i>导入
        </el-button>
        <el-button size="small" style="background-color:#fff;border: 1px solid #d9d9d9" :disabled="btnSelcet"><i
            class="el-icon-download" style="margin-right: 5px"></i>导出
        </el-button>
        <el-button size="small" style="background-color:#fff;border: 1px solid #d9d9d9" :disabled="btnSelcet"
                   @click="deleteList"><i
            class="el-icon-delete" style="margin-right: 5px"></i>批量移至回收站
        </el-button>
      </div>
      <div>
        <el-select size="small" style="width: 250px" v-model="templateType">
          <el-option value="1" label="全部模板类型"></el-option>
          <el-option value="2" label="普通模板" :disabled="true"></el-option>
          <el-option value="3" label="AI考评模板" :disabled="true"></el-option>
        </el-select>
        <el-input @keydown.enter.native="getData" v-model="params.templateName" size="small"
                  style="width: 250px;margin-left: 5px" placeholder="请输入模板名称查询"
                  suffix-icon="el-icon-search"></el-input>
      </div>
    </div>
    <div class="centerTable" v-if="activeIndex==1 ">
      <el-table :data="templateData"
                @selection-change="handleSelectionChange"
                height="calc(100vh - 250px)"
      >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column prop="templateName" label="模板名称"></el-table-column>
        <el-table-column prop="typeName" label="总分计算方式"></el-table-column>
        <el-table-column prop="score" label="总分"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <div style="display: flex">
              <div class="hoverBtn" @click="setting(scope.row)"><i class="el-icon-setting"></i>配置</div>
              <el-dropdown :hide-on-click="false" class="hoverBtn"
                           @command="(command) => handleCommand(command, scope.row)">
             <span class="el-dropdown-link">
              <i class="el-icon-more"/>更多
               </span>
                <el-dropdown-menu>
                  <el-dropdown-item command="_set">模板设置</el-dropdown-item>
                  <el-dropdown-item command="_copy">复制</el-dropdown-item>
                  <el-dropdown-item command="_delete">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
    <!--    模板资源库--> <!--    模板资源库--> <!--    模板资源库--> <!--    模板资源库--> <!--    模板资源库--> <!--    模板资源库-->
    <div style="display: flex;flex-wrap: wrap">
      <div class="card" v-if="activeIndex==3" v-for="a in cardList">
        <el-image :src="a.i"></el-image>
        <div class="card-buttons">
          <el-button size="small" style="background-color:#fff;color: #303e9d">预览</el-button>
          <el-button size="small" style="color: #fff">使用</el-button>
        </div>
        <p>{{ a.p }}
          <span style="display: block;margin-top:5px;color: #919398">{{ a.s }}</span></p>
      </div>
    </div>

    <!--    回收站--><!--    回收站--><!--    回收站-->
    <div style="margin-top: 10px" v-if="activeIndex==2">
      <div>
        <el-button size="small" style="background-color:#fff;border: 1px solid #eee" @click="deleteThorough('3')">
          <i style="margin-right: 5px" class="el-icon-circle-close"/>彻底删除
        </el-button>
        <el-button size="small" style="background-color:#fff;border: 1px solid #eee" @click="deleteThorough('1')">
          <i style="margin-right: 5px" class="el-icon-check"/>恢复模板
        </el-button>
        <span style="color: #919398;font-size: 12px;margin-left: 10px">回收站内，模板仅保留一年，到期将自动删除</span>
      </div>
      <div style="position: absolute; top: 30%;left: 50%;transform: translate(-30%, -50%)"
           v-if="templateDeleteData.length === 0">
        <el-image src="https://qiniushelves.jiachuangnet.com/renovation/img/V424151noData.png"></el-image>
        <p style="text-align: center">暂无数据~</p>
      </div>
      <div v-if="templateDeleteData.length != 0">
        <el-table :data="templateDeleteData"
                  @selection-change="handleSelectionDelete"
                  height="calc(100vh - 250px)"
        >
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column prop="templateName" label="模板名称"></el-table-column>
          <el-table-column prop="typeName" label="总分计算方式"></el-table-column>
          <el-table-column prop="score" label="总分"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
        </el-table>
        <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                       layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
    </div>
    <add-patrol ref="addPatrol" @addStatus="receiveMessage"></add-patrol>
    <patrol-setting ref="setPatrol" @addStatus="receiveMessage"></patrol-setting>
  </div>
</template>

<script>
import addPatrol from "./componentDialog/addPatrol.vue";
import patrolSetting from "./componentDialog/patrolSetting.vue";

export default {
  name: "patrolSOP",

  components: {
    addPatrol,
    patrolSetting
  },
  data() {
    return {
      activeIndex: "1",
      btnSelcet: true,
      templateType: '1',
      currentPage: 1,
      params: {
        pageNumber: 1,
        pageSize: 20,
        templateName: ""
      },
      totalCount: 0,
      templateDeleteData: [],
      templateIdDelete: [],
      templateIdList: [],
      templateData: [],
      cardList: [{
        i: "https://qiniushelves.jiachuangnet.com/renovation/img/V7346871746673539041.png",
        p: "通用日常巡查模板",
        s: "通用"
      }, {
        i: "https://qiniushelves.jiachuangnet.com/renovation/img/V642610chayin.26567ac7.png",
        p: "茶饮店日常巡查模板",
        s: "茶饮"
      }]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      const params = this.params
      params.state = this.activeIndex
      this.$api.patrolGetPatrolTemplateVo(params).then(res => {
        if (this.activeIndex == 1) this.templateData = res.data
        if (this.activeIndex == 2) this.templateDeleteData = res.data
        this.totalCount = res.total
      })
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key
      this.getData()
    },
    receiveMessage(val) {
      if (val == 1) {
        this.getData()
      }
    },
    handleSelectionChange(val) {
      this.btnSelcet = !Array.isArray(val) || val.length === 0;
      const templateIdList = val.filter(i => i.templateId != null).map(i => i.templateId)
      this.templateIdList = templateIdList
    },
    handleSelectionDelete(val) {
      const templateIdList = val.filter(i => i.templateId != null).map(i => i.templateId)
      this.templateIdDelete = templateIdList
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getData()
    },
    setting(a) {
      this.$router.push({
        path: '/patrolSetting',
        query: {
          templateId: a.templateId,
          templateName: a.templateName,
          score: a.score
        }
      })
    },
    _add() {
      this.$refs.addPatrol.handleOpen()
    },
    handleCommand(command, val) {
      if (command == '_set') {
        this.$refs.setPatrol.handleOpen(val.templateId)
      } else if (command == '_delete') {
        this.$alert(`确认删除？`, '提示', {
          confirmButtonText: '确定',
          callback: (res) => {
            if (res === 'confirm') {
              const data = {
                templateIdList: [val.templateId],
                state: 2
              }
              this.$api.patrolUpdatePatrolTemplateState(data).then(res => {
                if (res == 1) {
                  this.$message.success('删除成功！')
                  this.getData()
                }
              })
            }
          }
        });
      } else if (command == '_copy') {
        sessionStorage.setItem('templateInfo', val)
        this.$message.success('复制成功！')
      }

    },

    deleteList() {
      const data = {
        templateIdList: this.templateIdList,
        state: 2
      }

      this.$api.patrolUpdatePatrolTemplateState(data).then(res => {
        if (res == 1 || res == 2) {
          this.$message.success('删除成功！')
          this.getData()
        }
      })
    },
    deleteThorough(val) {
      const data = {
        templateIdList: this.templateIdDelete,
        state: val
      }
      this.$api.patrolUpdatePatrolTemplateState(data).then(res => {
        if (res == 1) {
          this.$message.success('操作成功！')
          this.getData()
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import "../../assets/css/public.css";

.hoverBtn {
  width: 80px;
  text-align: center;
  cursor: pointer;
}

.hoverBtn:hover {
  background-color: #eeeeee;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #303e9d;
  color: #303e9d;
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #303e9d;
  border-color: #303e9d;
}

.el-menu--horizontal > .el-menu-item {
  height: 25px;
  line-height: 10px;
}

.topSearch {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.centerTable {
  margin-top: 5px;
}

.card {
  margin: 20px;
  width: 300px;
  border-radius: 10px;
  border: 1px solid #eee;
  position: relative;
  overflow: hidden;

  .el-image {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  p {
    height: 60px;
    border-radius: 10px;
    margin-left: 10px;
  }
}

.card-buttons {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  gap: 10px;

  .el-button {
    width: 100px;
  }
}

.card:hover .card-buttons {
  display: flex;
}
</style>